<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/fragment::top">

</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="common/fragment::leftmenu"></div>
        <!--End 左侧导航-->

        <!--头部信息-->
        <div th:replace="common/fragment::header"></div>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header"><h4>设置权限</h4></div>
                            <div class="card-body">

                                <form action="#!" method="post">
                                    <div class="input-group m-b-10">
                                        <label class="input-group-addon " for="add-new-rolename">角色名称</label>
                                        <input class="form-control " id="add-new-rolename" name="role-input"
                                               placeholder="角色名称" type="text" readonly="readonly" th:value="${rolepo.name}">
                                        <input name="id" id="rolepoid" hidden="hidden" th:value="${rolepo.id}">
                                    </div>
                                    <!--
                                    <div class="input-group col-md-10">
                                        <label class="col-md-2 control-label" style="text-align: center;line-height: 36px">角色状态</label>
                                        <<div class="col-md-8">
                                            <label class="radio-inline" for="supplier-inline-radio1">
                                            <input id="supplier-inline-radio1" name="supplierstatus" type="radio"
                                                   value="1" th:checked="${supplier.getStatus()}==1">
                                            启用
                                            </label>
                                            <label class="radio-inline" for="supplier-inline-radio2">
                                                <input id="supplier-inline-radio2" name="supplierstatus" type="radio"
                                                       value="-1" th:checked="${supplier.getStatus()}==-1">
                                                禁用
                                            </label>
                                        </div>
                                    </div>
                                    -->
                                    <div class="input-group m-b-10">
                                        <label class="input-group-addon">角色状态</label>
                                        <div class="col-md-8">
                                            <label class="radio-inline" for="example-inline-radio1">
                                                <input id="example-inline-radio1" name="rolePOstatus" type="radio"
                                                       value="1" th:checked="${rolepo.getStatus()}==1">
                                                启用
                                            </label>
                                            <label class="radio-inline" for="example-inline-radio2">
                                                <input id="example-inline-radio2" name="rolePOstatus" type="radio"
                                                       value="-1" th:checked="${rolepo.getStatus()}==-1">
                                                锁定
                                            </label>
                                        </div>
                                    </div>
                                    <div class="input-group m-b-10">
                                        <label class="input-group-addon " for="role-comment">备注</label>
                                        <input class="form-control " id="role-comment" name="role-comment"
                                               placeholder=".....备注....." type="text">
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-striped">
                                            <thead>
                                            <tr>
                                                <th>
                                                    <label class="lyear-checkbox checkbox-primary">
                                                        <input id="check-all" name="checkbox" type="checkbox">
                                                        <span> 全选</span>
                                                    </label>
                                                </th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <th:block th:each="menu:${menuList}" th:if="${menuList} != null">
                                                <tr th:if="${menu} != null">
                                                    <td class="p-l-20">
                                                        <label class="lyear-checkbox checkbox-primary">
                                                            <input name="rules[]"
                                                                   th:class="|checkbox-parent checkbox-child mdi ${menu.icon}|"
                                                                   th:dataid="|id-${menu.id}|" th:value="${menu.id}"
                                                                   type="checkbox" th:attr="checked=${ckmap.get(menu.id)}">
                                                            <span th:text="${menu.menuname}"> 配置管理</span>
                                                        </label>

                                                    </td>
                                                </tr>
                                                <tr th:if="${menu.child.size()} >= 1">
                                                    <td class="p-l-40 ">
                                                        <label class="lyear-checkbox checkbox-primary checkbox-inline"
                                                               th:each="child:${menu.child}" th:with="parentid=${menu.id}">
                                                            <input name="rules[]"
                                                                   th:class="checkbox-child "
                                                                   th:dataid="|id-${parentid}-${child.id}|"
                                                                   th:value="${child.id}" type="checkbox"   th:attr="checked=${ckmap.get(child.id)}">
                                                            <span th:text="${child.menuname}"> 添加配置</span>
                                                        </label>
                                                    </td>
                                                </tr>
                                            </th:block>

                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <button
                                                class="btn btn-primary ajax-post"
                                                id="add-role-btn"
                                                target-form="add-form"
                                                type="button">确 定
                                        </button>
                                        <button
                                                class="btn btn-default"
                                                onclick="history.back(-1);return false;"
                                                type="button">返 回
                                        </button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<div th:insert="common/fragment::tail-script"></div>

<script type="text/javascript">
    $(function () {
        //动态选择框，上下级选中状态变化
        $('input.checkbox-parent').on('change', function () {
            let dataid = $(this).attr("dataid");
            $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));

        });

        $('input.checkbox-child').on('change', function () {
            if (!$(this).hasClass('checkbox-parent')) {
                var dataid = $(this).attr("dataid");
                dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                var parent = $('input[dataid=' + dataid + ']');
                if ($(this).is(':checked')) {
                    parent.prop('checked', true);
                    //循环到顶级
                    while (dataid.lastIndexOf("-") != 2) {
                        dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                        parent = $('input[dataid=' + dataid + ']');
                        parent.prop('checked', true);
                    }
                } else {
                    //父级
                    if ($('input[dataid^=' + dataid + '-]:checked').length == 0) {
                        parent.prop('checked', false);
                        //循环到顶级
                        while (dataid.lastIndexOf("-") != 2) {
                            dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                            parent = $('input[dataid=' + dataid + ']');
                            if ($('input[dataid^=' + dataid + '-]:checked').length == 0) {
                                parent.prop('checked', false);
                            }
                        }
                    }
                }
            }

        });

        // 添加role按钮提交 - addrole.ajax
        $('#add-role-btn').on('click', function () {
            // 1 检查角色名
            let rolename = $('#add-new-rolename').val();
            let rolePOstatus = $('input[name=rolePOstatus]:checked').val()
            let comment = $('#role-comment').val()
            let roleid = $('#rolepoid').val();

            if (rolename == '') {
                confirmMsg('请填写角色名')
                return
            }
            // 生成data -- json
            let ary = []
            $('input.checkbox-child').each(function () {
                if ($(this).prop("checked")) {
                    let obj = {}
                    obj.id = $(this).val()
                    ary.push(obj)
                }
            })

            let data = {
                name: rolename,
                authorities: ary,
                status: rolePOstatus,
                comment: comment,
                id:roleid
            }
            //   let data = $('#icon-form').serialize()
            post_ajax('/role/saverole.ajax', data, '/role/rolelist.do');

        });
    });
</script>
</body>
</html>